<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    @close="tableConfig.show = false"
    :show-close="tableConfig.showClose"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">


  <el-descriptions title="" :column="3" :size="size" border>

    <el-descriptions-item label="名称">{{psPassword.name}}</el-descriptions-item>
      <el-descriptions-item label="账号">{{psPassword.account}}</el-descriptions-item>
      <el-descriptions-item label="密码类型">
        <el-tag type="success" size="mini">{{psPassword.passwordTypeName}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="所属家庭成员">{{psPassword.userMemberFamilyName}}</el-descriptions-item>
      <el-descriptions-item label="密码1">{{psPassword.password}}</el-descriptions-item>
      <el-descriptions-item label="密码2">{{psPassword.passwordTwo}}</el-descriptions-item>
      <el-descriptions-item label="密码3">{{psPassword.passwordThree}}</el-descriptions-item>
      <el-descriptions-item label="密码4">{{psPassword.passwordFour}}</el-descriptions-item>
      <el-descriptions-item label="密保">{{psPassword.passwordProtection}}</el-descriptions-item>
      <el-descriptions-item label="绑定手机">{{psPassword.phone}}</el-descriptions-item>
      <el-descriptions-item label="绑定邮箱">{{psPassword.email}}</el-descriptions-item>
      <el-descriptions-item label="录入时间">{{getTime(psPassword.createTime)}}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions style="margin-top: 10px" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item label="网站名称">{{psPassword.webName}}</el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-document"></i>
          网站url
        </template>
        {{psPassword.webUrl}}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-document"></i>
          描述
        </template>
        {{psPassword.describe}}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions class="margin-top" title="" direction="vertical" :column="3" :size="size" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-document"></i>
          附加信息
        </template>
        {{psPassword.subsidiaryInfo}}
      </el-descriptions-item>
    </el-descriptions>

    <span slot="footer" class="dialog-footer">
      <el-button plain type="primary" @click="tableConfig.show = false">关闭</el-button>
    </span>

  </el-dialog>

</template>

<script>

  import {getFullDate, getFullTime} from "../../utils/utils";

  export default {
    name: "PasswordManagementDetailed",
    data(){
      return {
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 密码信息
        psPassword: {
          name: null,
          userMemberFamilyId: null,
          typeId: null,
          account: null,
          password: null,
          passwordTwo: null,
          passwordThree: null,
          passwordFour: null,
          passwordProtection: null,
          phone: null,
          email: null,
          webName: null,
          webUrl: null,
          describe: null,
          subsidiaryInfo: null,
          passwordTypeName: null,
          userMemberFamilyName: null,
        },
        // 列表的尺寸
        size: 'small',
        // tag 的大小
        tagSize: 'small',
      }
    },
    methods: {
      /**
       * 打开密码详情
       * @param obj 密码详情
       */
      openPsPasswordDetailed(obj){
        this.psPassword = obj
        this.tableConfig.show = true
        this.$store.commit('navigationListChange', ['保险箱', '密码管理', '详情'])
      },
      /**
       * 转换时间戳为时间格式
       */
      getTime(item){
        return getFullTime(item)
      },
      /**
       * 转换时间戳为指定格式
       * @param item 时间戳
       * @return {string} yyyy-MM-dd
       */
      getFullDate(item){
        return getFullDate(item);
      }
    }
  }
</script>

<style scoped>

</style>
